<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
    div{
        margin: 0;
        padding: 0;
        /*border: 1px solid black;*/
        float: left;
    }
    span{
        display: block;
        width: 200px;
        height: 40px;
        background-color: gray;
        color: white;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 40px;
    }
    li{
        display: block;
        width: 100px;
        height: 30px;
        margin: 10 auto;
        text-align: center;
        /*border: 1px solid blue;*/
        line-height: 30px;
        color: gray;
    }
    ul{
        display: none;
    }
    span:hover{
        color: orange;
        text-decoration: underline;
    }
    li:hover{
        text-decoration: underline;
        color: gray;
    }
    .u1{
        display: block;
        border: 1px solid gray;
        border-top: none;
        width: 100px;
        margin: 0 auto;
        padding: 0;
        /*display: none;*/
    }
    </style>
</head>
<body>
    <div>
        <span class="s1">公司简介</span>
        <ul>
        <li>概况介绍</li>
        <li>发展历史</li>
        <li>公司实力</li>
        </ul>
    </div>
    <div>
        <span class="s2">产品介绍</span>
        <ul>
        <li>软件研发</li>
        <li>软件教育</li>
        <li>天使投资</li>
        </ul>
    </div>
    <div>
        <span class="s3">联系我们</span>
        <ul>
        <li>公司地址</li>
        <li>联系方式</li>
        <li>投资加盟</li>
        </ul>
    </div>
    <div>
        <span class="s4">人才招聘</span>
        <ul>
        <li>IOS招聘</li>
        <li>HTML5</li>
        <li>PHP招聘</li>
        </ul>
    </div>
    <div style="clear: both"></div>
</body>
</html>
<script>

    $('.s1').mouseover(function(){
        $(this).siblings().addClass('u1')
        $('.s2').siblings().removeClass('u1');
        $('.s3').siblings().removeClass('u1');
        $('.s4').siblings().removeClass('u1');
    });

    $('.s2').mouseover(function(){
        $(this).siblings().addClass('u1')
        $('.s1').siblings().removeClass('u1');
        $('.s3').siblings().removeClass('u1');
        $('.s4').siblings().removeClass('u1');
    });

    $('.s3').mouseover(function(){
        $(this).siblings().addClass('u1')
        $('.s2').siblings().removeClass('u1');
        $('.s1').siblings().removeClass('u1');
        $('.s4').siblings().removeClass('u1');
    });

    $('.s4').mouseover(function(){
        $(this).siblings().addClass('u1')
        $('.s2').siblings().removeClass('u1');
        $('.s3').siblings().removeClass('u1');
        $('.s1').siblings().removeClass('u1');
    });




</script>